<template>
  <div class="orderManagement">
    <!-- <h1>订单管理</h1> -->
    <div style="width: 98%; margin: auto">
      <div class="header">
        <div></div>
        <div class="header-right">
          <el-input
            placeholder="请输入商品名称"
            prefix-icon="el-icon-search"
            v-model="searchinput"
            clearable
          ></el-input>
          <el-button type="primary" @click="primary">查询</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="销量"
          show-overflow-tooltip
          align="center"
          prop="quantity"
        >
        </el-table-column>
        <el-table-column
          label="销量金额"
          prop="totalMoney"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.money * scope.row.quantity }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImg" alt="" style="width: 50px" />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>
<script>
import { fruitsSorderAll, orderByName } from "../common/Api/index";
export default {
  data() {
    return {
      searchinput: "",
      tableData: [],
    };
  },
  activated() {},
  mounted() {
    this.userList();
    console.log(this.tableData);
  },
  methods: {
    primary() {
      if (this.searchinput == "") {
        this.userList();
      } else {
        let arr = {
          userName: this.searchinput,
        };
        orderByName(arr).then((res) => {
          this.tableData = res;
        });
      }

      // this.userList();
    },
    userList() {
      fruitsSorderAll().then((res) => {
        this.tableData = res.records;
        console.log(res, "111");
      });
    },
    addApproval() {},
  },
};
</script>
<style lang="scss">
.orderManagement {
  width: 100%;
  height: 100%;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .header-right {
      width: 20%;
      .el-input {
        width: 70% !important;
      }
    }
  }
}
</style>